<template>
  <div
    v-if="currentPlaying.id && isShow"
    class="play_bar u-f van-hairline--top"
    :style="{ bottom: hasTabBar ? 'var(--van-tabbar-height)' : 0 }"
    @click="openPlayPagePopup"
  >
    <div class="img_box u-f u-f-ac u-f-jc">
      <van-image radius="30" :src="currentPlaying.picUrl" />
    </div>
    <div class="author">
      <span class="name">{{ currentPlaying.name }}</span>
      <span class="a_name">
        -
        <span v-for="(item, i) in currentPlaying.song.artists" :key="item.id">
          <span v-if="i === 0">{{ item.name }}</span>
          <span v-else>/{{ item.name }}</span>
        </span>
      </span>
    </div>
    <div class="circle_box" @click.stop="changePlayStatus">
      <van-circle
        v-model:current-rate="progress"
        :rate="progress"
        color="var(--sky-text-black-color)"
        layer-color="var(--sky-text-gray2-color)"
      >
        <i
          class="iconfont icon-zantingtingzhi"
          v-show="playOrPause === 'play'"
        ></i>
        <i
          class="iconfont icon-bofang"
          v-show="!playOrPause || playOrPause === 'pause'"
        ></i>
      </van-circle>
    </div>
    <div class="menu" @click.stop="openPlayListPopup">
      <i class="iconfont icon-icon-test"></i>
    </div>
  </div>
  <!-- 播放页面 -->
  <play-page ref="showPlayPage"></play-page>
  <!-- 播放列表 -->
  <play-list-popup ref="showPlayList"></play-list-popup>
</template>

<script lang="ts">
import {
  computed,
  ComputedRef,
  defineComponent,
  Ref,
  ref,
  watchEffect,
} from 'vue'
import { useRoute } from 'vue-router'
import { Store, useStore } from 'vuex'
import PlayPage from '@/components/play/index.vue'
import PlayListPopup from '@/components/common/play-list-popup.vue'

// 打开播放页面
const handlePlayPagePopup = () => {
  const showPlayPage: Ref<any> = ref(null)

  const openPlayPagePopup = () => {
    showPlayPage.value?.open()
  }

  return {
    showPlayPage,
    openPlayPagePopup,
  }
}

// 打开播放列表弹窗
const handlePlayPopup = () => {
  const showPlayList: Ref<any> = ref(null)

  const openPlayListPopup = () => {
    showPlayList.value?.open()
  }

  return {
    showPlayList,
    openPlayListPopup,
  }
}

// 处理音频
const handleAudio = (
  store: Store<any>,
  showPlayPage: Ref<any>,
  playOrPause: ComputedRef<any>
) => {
  const progress: Ref<number> = ref(30)

  const playAudio = () => {
    showPlayPage.value?.playAudio()
  }

  const pauseAudio = () => {
    showPlayPage.value?.pauseAudio()
  }

  const changePlayStatus = () => {
    if (playOrPause.value === 'play') {
      pauseAudio()
    } else {
      playAudio()
    }
  }

  watchEffect(() => {
    progress.value = store.state.audioProgress
  })

  return {
    progress,
    changePlayStatus,
  }
}

export default defineComponent({
  name: 'PlayBar',
  components: {
    PlayPage,
    PlayListPopup,
  },
  setup() {
    const route = useRoute()
    const store = useStore()

    const hasTabBar = computed(() => {
      if (route.path === '/' || route.path === '/mine') {
        return true
      }
      return false
    })

    const currentPlaying = computed(() => {
      return store.state.currentPlaying
    })

    const playOrPause = computed(() => {
      return store.state.playOrPause
    })

    const { showPlayPage, openPlayPagePopup } = handlePlayPagePopup()

    const { showPlayList, openPlayListPopup } = handlePlayPopup()

    const { progress, changePlayStatus } = handleAudio(
      store,
      showPlayPage,
      playOrPause
    )

    // 是否显示此组件
    const isShow = computed(() => {
      let bols = true
      if (
        route.path !== '/song-related-video' &&
        !route.path.includes('/example')
      ) {
        bols = true
      } else {
        changePlayStatus()
        bols = false
      }
      return bols
    })

    return {
      isShow,
      hasTabBar,
      progress,
      currentPlaying,
      showPlayPage,
      showPlayList,
      playOrPause,
      openPlayPagePopup,
      openPlayListPopup,
      changePlayStatus,
    }
  },
})
</script>

<style lang="less" scoped>
.play_bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 375px;
  height: 54px;
  padding: 0 16px;
  margin: auto;
  background-color: var(--sky-white-background-color);
  z-index: 2;
  box-sizing: border-box;
  .img_box {
    position: relative;
    top: -5px;
    width: 42px;
    height: 42px;
    margin-right: 10px;
    border-radius: 100%;
    background-image: url('../../assets/img/CD.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 3;
    .van-image {
      width: 28px;
      height: 28px;
      border-radius: 100%;
    }
  }
  .author {
    width: 180px;
    padding-top: 15px;
    margin-right: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .name {
      font-size: 16px;
      color: var(--sky-text-black-color);
    }
    .a_name {
      font-size: 14px;
      color: var(--sky-text-gray6-color);
    }
  }
  .circle_box {
    width: 35px;
    padding-top: 10px;
    .van-circle {
      width: 27px;
      height: 27px;
      line-height: 27px;
      .iconfont {
        font-size: 14px;
        color: var(--sky-text-black-color);
        margin-left: 2px;
      }
    }
  }

  .menu {
    width: 35px;
    padding-top: 15px;
    text-align: right;
    .iconfont {
      font-size: 16px;
      color: var(--sky-text-black-color);
    }
  }
}
</style>